<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>8 模板语法-指令</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
<div id="app">
    <site-info
            v-for="site in sites"
            :id="site.id"
            :title="site.title"
    ></site-info>
</div>

<script>
    const Site = {
        data() {
            return {
                sites: [
                    { id: 1, title: 'Google' },
                    { id: 2, title: 'Runoob' },
                    { id: 3, title: 'Taobao' }
                ]
            }
        }
    }

    const app = Vue.createApp(Site)

    app.component('site-info', {
        props: ['id','title'],
        template: `<h4>{{ id }} - {{ title }}</h4>`
    })

    app.mount('#app')
</script>
</body>
</html>